<template>
	<div class="seckill">
		<div class="goods-wrap-1" v-if="datas.mode == 1" :style="marginStyle(datas)">
			<div class="item" v-for="(item, index) in datas.goodsList" :key="index" :style="paddingStyle(datas)">
				<div class="item-wrap" :style="baseStyle(datas)">
					<div class="show-image flex">
						<el-image :src="STATIC_URL + item.image" fit="contain" class="image" :preview-teleported="true"></el-image>
					</div>
					<div class="tag" v-if="datas.tagStyle.show == 1">
						<div class="deco-image flex" v-if="datas.tagStyle.src != ''">
							<el-image :src="STATIC_URL + datas.tagStyle.src" fit="cover" class="image" :preview-teleported="true"></el-image>
						</div>
					</div>
					<div class="desc">
						<div class="title deco-table-line-1 mb6" :style="{ color: datas.goodsFields.title.color }">
							{{ item.title }}
						</div>
						<div class="price" :style="{ color: datas.goodsFields.price.color }">￥{{ item.price }}</div>
					</div>
				</div>
			</div>
		</div>

		<div class="goods-wrap-2" v-if="datas.mode == 2" :style="marginStyle(datas)">
			<div class="item" v-for="(item, index) in datas.goodsList" :key="index" :style="paddingStyle(datas)">
				<div class="item-wrap" :style="baseStyle(datas)">
					<div class="show-image flex" style="border-radius: 0px">
						<el-image :src="STATIC_URL + item.image" fit="cover" class="image" :preview-teleported="true"></el-image>
					</div>
					<div class="tag" v-if="datas.tagStyle.show == 1">
						<div class="deco-image flex" v-if="datas.tagStyle.src != ''">
							<el-image :src="STATIC_URL + datas.tagStyle.src" fit="contain" class="image" :preview-teleported="true"></el-image>
						</div>
					</div>
					<div class="desc">
						<div>
							<div class="title deco-table-line-2 mb6" :style="{ color: datas.goodsFields.title.color }">
								{{ item.title }}
							</div>
							<div class="subtitle deco-table-line-1" :style="{ color: datas.goodsFields.subtitle.color }">副标题</div>
						</div>
						<div>
							<div class="price mb12">
								<span :style="{ color: datas.goodsFields.price.color }">￥{{ item.price }}</span
								><s class="original-price ml4" :style="{ color: datas.goodsFields.original_price.color }"> ￥{{ item.originalPrice }}</s>
							</div>

							<div class="flex">
								<div class="sales" :style="{ color: datas.goodsFields.sales.color }">已售8|</div>
								<div class="stock" :style="{ color: datas.goodsFields.stock.color }">库存{{ item.stock }}</div>
							</div>
						</div>

						<div
							class="button"
							v-if="datas.buyNowStyle.mode == 1"
							:style="{ background: `linear-gradient(90deg, ${datas.buyNowStyle.color1},${datas.buyNowStyle.color2})` }"
						>
							{{ datas.buyNowStyle.text }}
						</div>
						<div class="button" v-if="datas.buyNowStyle.mode == 2" :style="buyStyle(datas.buyNowStyle)"></div>
					</div>
				</div>
			</div>
		</div>
		<slot name="deles" />
	</div>
</template>

<script setup lang="ts" name="seckill">
import { url } from 'inspector';
import { STATIC_URL } from '/@/utils/config';
import { ref, computed } from 'vue';

const name = ref();

const props = defineProps({
	datas: {},
});

const marginStyle = computed(() => (item) => {
	return {
		margin: -item.space + 'px',
	};
});

const paddingStyle = computed(() => (item) => {
	return {
		padding: item.space + 'px',
	};
});
const baseStyle = computed(() => (item) => {
	return {
		'border-top-right-radius': item.borderRadiusTop + 'px',
		'border-top-left-radius': item.borderRadiusTop + 'px',
		'border-bottom-left-radius': item.borderRadiusBottom + 'px',
		'border-bottom-right-radius': item.borderRadiusBottom + 'px',
	};
});

const buyStyle = computed(() => (item) => {
	return {
		backgroundImage: item.src ? `url(${STATIC_URL + item.src})` : undefined,
	};
});
</script>

<style scoped lang="scss">
.seckill {
	position: relative;
	min-height: 50px;
}

.goods-wrap-2 {
	display: flex;
	flex-wrap: wrap;
	margin: 0px;
}
.goods-wrap-1 {
	display: flex;
	flex-wrap: wrap;
	margin: 0px;
}

.goods-wrap-2 .item {
	width: 100%;
}

.goods-wrap-1 .item {
	width: 33.3%;
	padding: 0px;
	flex-shrink: 0;
	border-radius: 10px;
}

.item-wrap {
	background: #fff;
	position: relative;
	overflow: hidden;
	font-size: 12px;
	// border-radius: inherit;
}

.goods-wrap-2 .item-wrap {
	display: flex;
	height: 130px;
}

.goods-wrap-1 .show-image {
	width: 100%;
	height: 110px;
}

.item-wrap .desc {
	padding: 10px;
	flex: 1;
}

.item-wrap .desc .title,
.item-wrap .desc .price {
	font-size: 14px;
}

.deco-table-line-1 {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	height: 23px;
	line-height: 23px;
}

.item-wrap .tag .deco-image {
	width: 36px !important;
	height: 22px !important;
}

.item-wrap .tag {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
}

.goods-wrap-2 .item-wrap .desc {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.deco-table-line-2 {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	line-height: 1;
}

.item-wrap .button {
	position: absolute;
	right: 10px;
	bottom: 10px;
	height: 24px;
	line-height: 24px;
	font-size: 12px;
	color: #fff;
	padding: 0 12px;
	border-radius: 12.5px;
	background: linear-gradient(90deg, #fe8900, #ff5e00);
	background-size: 100% 100% !important;
}

.buy-button-img {
	height: 100%;
	width: 100%;
}

.show-image .image {
	height: 100%;
	width: 100%;
}
</style>
